<template>
  <div class="w-full flex-col items-center">
    <a-tooltip v-for="item in menus" :title="item.label" placement="right">
      <div
        @click="onClickMenu(item)"
        class="flex-col w-48 h-56 mt-8 items-center justify-center cursor-pointer text-[#14181ebf] auto-bg-hover rounded-3xl"
        :class="active == item.key ? 'bg-primary_hover color-text_active' : 'hover:text-primary'"
      >
        <i :class="item.icon" class="text-20"></i>
        <span class="text-12 font-500 mt-6">{{ item.shortLabel || item.label }}</span>
      </div>
    </a-tooltip>
  </div>
</template>
<script setup lang="ts">
import { MenuItem, usePermissionStore } from '@/store'
import { useRouter } from 'vue-router'

defineProps<{ active: string }>()
const { menus } = usePermissionStore()
const router = useRouter()

function getMenu(menu: MenuItem) {
  if (menu.path) {
    return menu
  } else if (menu.children && menu.children.length > 0) {
    return getMenu(menu.children[0])
  }
}

async function onClickMenu(menu: MenuItem) {
  const target = getMenu(menu)
  if (target) {
    await router.push(target.path)
  }
}
</script>
